<template>
  <div>
    <div id="main" style="width: 500px; height: 500px"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import axios from 'axios'

export default {
  name: "goods",
  data() {
    return {
      data: ''
    }
  },
  methods: {
    get_echart() {
      var chartDom = document.getElementById('main');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        xAxis: {
          type: 'category',
          data: this.data[0]
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.data[1],
            type: 'bar'
          }
        ]
      };

      option && myChart.setOption(option);
    },
    get_echarts() {
      axios.get('http://127.0.0.1:5000/get_echart')
          .then(res => {
            this.data = res.data.list
            this.get_echart()
          })
    }
  },
  mounted() {

    this.get_echarts()
  }
}
</script>

<style scoped>

</style>
